.icon {
  box-sizing: content-box;
}

.copyIcon {
  opacity: 1;
}

.doneIcon {
  position: absolute;
  inset-block-start: 0;
  opacity: 0;
}

.copied .copyIcon {
  animation: hide-icon 1.25s forwards;
}

.copied .doneIcon {
  animation: show-icon 1.25s 0.15s forwards;
}

@keyframes hide-icon {
  0% {
    opacity: 1;
  }

  20% {
    opacity: 0;
    transform: scale(0.5);
  }

  80% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
  }
}
@keyframes show-icon {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
